<template>
  <div>
    <div>
      <Form ref="formData" :model="formData" :label-width="80">
        <Row style="margin-top: 10px;">

          <Col span="5">
            <FormItem label="日期" prop="trainDate">
              <DatePicker type="date" v-model="formData.trainDate" placeholder="日期"
                          format="yyyy-MM-dd" style="width: 100%"></DatePicker>
            </FormItem>
          </Col>

          <Col span="5">
            <FormItem label="车次" prop="trainNumber">

              <AutoComplete
                v-model="formData.trainNumber"
                :data="trainNumbers"
                @on-search="handleSearchTrainNumber"
                :transfer="true"
                placeholder="车次"></AutoComplete>

            </FormItem>
          </Col>
          <Col span="5">
            <FormItem label="出发站" prop="startStationName">
              <AutoComplete
                v-model="formData.startStationName"
                :data="fromStations"
                @on-search="handleSearchFromStation"
                :transfer="true"
                placeholder="出发站"></AutoComplete>
            </FormItem>
          </Col>
          <Col span="5">
            <FormItem label="到达站" prop="endStationName">
              <AutoComplete
                v-model="formData.endStationName"
                :data="toStations"
                @on-search="handleSearchToStation"
                :transfer="true"
                placeholder="到达站"></AutoComplete>
            </FormItem>
          </Col>
          <Col span="4">
            <Divider type="vertical" />
            <Button type="primary" @click="removeBatch" style="margin-left: 8px">删除</Button>
            <Button type="primary" @click="query" style="margin-left: 8px">查询</Button>
          </Col>
        </Row>
      </Form>
    </div>

    <div>
      <Table stripe ref="selection" :columns="columns" :data="rows"></Table>
    </div>
    <div class="paging">
      <Page :total="total" :page-size="pageSize" show-sizer show-elevator show-total
            @on-change="changePage" @on-page-size-change="changePageSize"></Page>
    </div>
  </div>
</template>
<style scoped>
.paging {
  float: right;
  margin-top: 10px;
}
</style>
<script>
import { baseList } from '@/libs/crud/base-list'
import instance from '@/libs/api'

export default {
  mixins: [baseList],
  data () {
    return {
      trainNumbers: [], // 车次自动补全数组数据
      fromStations: [], // 车次自动补全数组数据
      toStations: [], // 车次自动补全数组数据
      formData: {
        trainDate: '',
        trainNumber: '',
        startStationName: '',
        endStationName: ''
      },
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '日期',
          key: 'trainDate'
        },
        {
          title: '车次',
          key: 'trainNumber'
        },
        {
          title: '乘车人',
          key: 'passengerName'
        },
        {
          title: '出发站',
          key: 'startStationName'
        },
        {
          title: '到达站',
          key: 'endStationName'
        },
        {
          title: '发车时间',
          key: 'startTime'
        },
        {
          title: '金额',
          key: 'money'
        },
        {
          title: '操作',
          key: 'action',
          width: 300,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.edit(params.row.id)
                  }
                }
              }, '查看'),
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.remove(params.row.id, params.index)
                  }
                }
              }, '删除')
            ])
          }
        }
      ]
    }
  },
  methods: {
    handleSearchTrainNumber (value) {
      if (value) {
        instance.post(`/train/number/list`, `number=${this.formData.trainNumber}`).then(response => {
          let data = response.data.map((item) => { return item.number })
          this.trainNumbers = data
        }).catch(error => {
          console.log(error)
        })
      } else {
        this.trainNumbers = []
      }
    },
    handleSearchFromStation (value) {
      if (value) {
        instance.post(`/train/scheduler/from-stations`, `fromStation=${value}`).then(response => {
          this.fromStations = response.data
        }).catch(error => {
          console.log(error)
        })
      } else {
        this.fromStations = []
      }
    },
    handleSearchToStation (value) {
      if (value) {
        instance.post(`/train/scheduler/to-stations`, `toStation=${value}`).then(response => {
          this.toStations = response.data
        }).catch(error => {
          console.log(error)
        })
      } else {
        this.toStations = []
      }
    }
  }

}
</script>
